﻿@page "/"
@inject IJSRuntime JSRuntime
@inject HttpClient Http
@using BootstrapBlazor.Components
<div style="padding: 0;">
    <Layout ShowFooter="true" SideWidth="220" IsFullSide="true">
        <Header>
                <div class="top-menu">
                    <ul>
                        <li><a href="#">文件</a></li>
                        <li><a href="#">编辑</a></li>
                        <li><a href="#">视图</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </div>

        </Header>
        <Side>
            <div style="background-color:#333; color: white; text-align: center; padding: 10px;">
                制卡器
            </div>
            <Scroll Height="800px" style="width:220px;">
                <Collapse style="width:200px" OnCollapseChanged="@OnChanged">
                    <CollapseItems >
                        <CollapseItem Text="主图" style="background-color:#333">
                            <Select TValue="string" Color="Color.Dark" Items="GroupItems">
                            </Select>
                            <div>
                                <EditorForm Model="@Model">
                                    <FieldItems>
                                        <EditorItem Text="x坐标" @bind-Field="@context.xPosition" Editable="true" />
                                        <br/>
                                        <EditorItem Text="y坐标" @bind-Field="@context.yPosition" Editable="true" />
                                        <EditorItem Text="放大倍数" @bind-Field="@context.scale" Editable="true" />
                                    </FieldItems>
                                    <Buttons>
                                        <Button Icon="fa-solid fa-floppy-disk" Text="提交" />
                                    </Buttons>
                                </EditorForm>
                            </div>
                        </CollapseItem>
                        <CollapseItem Text="框图" IsCollapsed="false" style="background-color:#333">
                            <Select TValue="string" Color="Color.Dark" Items="GroupItems">
                            </Select>
                            <div>
                                <EditorForm Model="@Model">
                                    <FieldItems>
                                        <EditorItem Text="x坐标" @bind-Field="@context.xPosition" Editable="true" />
                                        <br />
                                        <EditorItem Text="y坐标" @bind-Field="@context.yPosition" Editable="true" />
                                        <EditorItem Text="放大倍数" @bind-Field="@context.scale" Editable="true" />
                                    </FieldItems>
                                    <Buttons>
                                        <Button Icon="fa-solid fa-floppy-disk" Text="提交" />
                                    </Buttons>
                                </EditorForm>
                            </div>
                        </CollapseItem>
                        <CollapseItem Text="副图01">
                            <Select TValue="string" Color="Color.Dark" Items="GroupItems">
                            </Select>
                            <div>
                                <EditorForm Model="@Model">
                                    <FieldItems>
                                        <EditorItem Text="x坐标" @bind-Field="@context.xPosition" Editable="true" />
                                        <br />
                                        <EditorItem Text="y坐标" @bind-Field="@context.yPosition" Editable="true" />
                                        <EditorItem Text="放大倍数" @bind-Field="@context.scale" Editable="true" />
                                    </FieldItems>
                                    <Buttons>
                                        <Button Icon="fa-solid fa-floppy-disk" Text="提交" />
                                    </Buttons>
                                </EditorForm>
                            </div>
                        </CollapseItem>
                        <CollapseItem Text="副图02">
                            <Select TValue="string" Color="Color.Dark" Items="GroupItems">
                            </Select>
                            <div>
                                <EditorForm Model="@Model">
                                    <FieldItems>
                                        <EditorItem Text="x坐标" @bind-Field="@context.xPosition" Editable="true" />
                                        <br />
                                        <EditorItem Text="y坐标" @bind-Field="@context.yPosition" Editable="true" />
                                        <EditorItem Text="放大倍数" @bind-Field="@context.scale" Editable="true" />
                                    </FieldItems>
                                    <Buttons>
                                        <Button Icon="fa-solid fa-floppy-disk" Text="提交" />
                                    </Buttons>
                                </EditorForm>
                            </div>
                        </CollapseItem>
                        <CollapseItem Text="文本">
                            <Select TValue="string" Color="Color.Dark" Items="GroupItems">
                            </Select>
                            <div>
                                <EditorForm Model="@Model">
                                    <FieldItems>
                                        <EditorItem Text="x坐标" @bind-Field="@context.xPosition" Editable="true" />
                                        <EditorItem Text="y坐标" @bind-Field="@context.yPosition" Editable="true" />
                                        <EditorItem Text="放大倍数" @bind-Field="@context.scale" Editable="true" />
                                    </FieldItems>
                                    <Buttons>
                                        <Button Icon="fa-solid fa-floppy-disk" Text="提交" />
                                    </Buttons>
                                </EditorForm>
                            </div>
                        </CollapseItem>
                    </CollapseItems>
                </Collapse>
                    <div class="images img-ph mt-3" style="width:200px" FitMode="none">
                         <div class="row g-3">                  
                        <div class="images-item">
                            <div style="background-color:salmon">主图</div>
                            <ImageViewer Url="assets/sub01/4.png" ShowPlaceHolder="true" FitMode="ObjectFitMode.None" style="width:50%;height:50%">
                                <PlaceHolderTemplate>
                                    <div class="bb-img-holder">
                                        <div class="bb-img-loading">加载中 ...</div>
                                    </div>
                                </PlaceHolderTemplate>
                            </ImageViewer>
                        </div>
                    </div>
                    <div class="images img-ph mt-3" style="width:200px;height:200px">
                        <div class="images-item">
                            <div style="background-color:salmon">框图</div>
                            <ImageViewer Url="assets/sub01/4.png" ShowPlaceHolder="true" FitMode="ObjectFitMode.None">
                                <PlaceHolderTemplate>
                                    <div class="bb-img-holder">
                                        <div class="bb-img-loading">加载中 ...</div>
                                    </div>
                                </PlaceHolderTemplate>
                            </ImageViewer>
                        </div>
                    </div>
                    <div class="images img-ph mt-3">
                        <div class="images-item">
                            <div style="background-color:salmon">副图01</div>
                            <ImageViewer Url="assets/sub01/4.png" ShowPlaceHolder="true" FitMode="ObjectFitMode.None" style="width:50%;height:50%">
                                <PlaceHolderTemplate>
                                    <div class="bb-img-holder">
                                        <div class="bb-img-loading">加载中 ...</div>
                                    </div>
                                </PlaceHolderTemplate>
                            </ImageViewer>
                        </div>
                    </div>
                    <div class="images img-ph mt-3">
                        <div class="images-item">
                            <div style="background-color:salmon">副图02</div>
                            <ImageViewer Url="asset/sub01/4.png" ShowPlaceHolder="true" FitMode="ObjectFitMode.None" style="width:50%;height:50%">
                                <PlaceHolderTemplate>
                                    <div class="bb-img-holder" style="width:200px">
                                        <div class="bb-img-loading"></div>
                                    </div>
                                </PlaceHolderTemplate>
                            </ImageViewer>
                        </div>
                    </div> 
                    <Button IsDisabled="false" Color="Color.Light" OnClick="RotateImage">旋转</Button>
                    <Button IsDisabled="false" Color="Color.Light" OnClick="draw">合成</Button>
                </div>
            </Scroll>
        </Side>
        <Main>
@*             <img src="assets/sub01/4.png" id="img1" style="display: block" width="100" height="100" />
            <img src="assets/sub01/5.png" id="img2" style="display: block" width="100" height="100" /> *@
            <canvas id="myCanvas" width="1000" height="600" style="background-color:wheat"></canvas>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</div>
@code {
    private bool isFirstRender = true;
    private double scaleValue = 1.0;
    private bool State = true;
    private bool IsRow = false;
    private bool IsWrap = false;
    private bool IsReverse = true;
    private StackAlignItems AlignItems = StackAlignItems.End;
    private StackJustifyContent Justify = StackJustifyContent.End;
    private imagesSingle Model = new imagesSingle("11","1123");

    class imagesSingle
    {

        public String url { set; get; }
        public String name { set; get; }
        public int xPosition { set; get; }
        public int yPosition { set; get; }
        public int scale{ set; get; }

        public imagesSingle(String url, String name)
        {
            this.name = name;
            this.url = url;
            this.xPosition = 0;
            this.yPosition = 0;
            this.scale = 1;
        }
    }
    class textSingle
    {
        public String name { set; get; }
        public int xPosition { set; get; }
        public int yPosition { set; get; }
        public textSingle(String name)
        {
            this.name = name;
            this.xPosition = 0;
            this.yPosition = 0;
        }
    }
    IEnumerable<SelectedItem> GroupItems = new List<SelectedItem>
    {
        new SelectedItem { Value = "1", Text = "Item 1" },
        new SelectedItem { Value = "2", Text = "Item 2" },
        new SelectedItem { Value = "3", Text = "Item 3" }
        // 添加更多项...
    };

    private Task OnChanged(CollapseItem item)
    {
        return Task.CompletedTask;
    }

    private async Task OnScaleValueChange()
    {
        await JSRuntime.InvokeVoidAsync("scaleImage", scaleValue);
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initializeCanvas");

            isFirstRender = false;
        }
    }

    private async Task RotateImage()
    {
        await JSRuntime.InvokeVoidAsync("rotateCanvasImage", 90); // 假设每次旋转 90 度
    }
    private async Task StartCropping()
    {
        await JSRuntime.InvokeVoidAsync("cropFunctions.initializeCropping");
    }

    private async Task FinishCropping()
    {
        await JSRuntime.InvokeVoidAsync("cropFunctions.finalizeCropping");
    }

    private async Task CallHandleComposeImg()
    {
        await JSRuntime.InvokeVoidAsync("handleComposeImg");
    }
    private async Task draw()
    {
        await JSRuntime.InvokeVoidAsync("draw");

    }
}

